<template>
    <div>



        <el-form :model="form" label-width="120px" size="mini">
            <el-form-item label="身份证" prop="cardno">
                <el-input v-model="form.cardno"></el-input>
            </el-form-item>
            <el-form-item label="生日" prop="cardno">

                <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="学历" prop="cardno">
                <el-input v-model="form.education"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="cardno">
                <el-input v-model="form.gender"></el-input>
            </el-form-item>
            <el-form-item label="邮箱 " prop="cardno">
                <el-input v-model="form.email
                    "></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="cardno">
                <el-input v-model="form.phone
                    "></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="cardno">
                <el-input v-model="form.realName"></el-input>
            </el-form-item>
            <!-- password -->
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password"></el-input>
            </el-form-item>
            <!-- teamRole -->
            <el-form-item label="队内编号" prop="teamRole">
                <el-input v-model="form.teamRole"></el-input>
            </el-form-item>
            <!-- politics政治 -->
            <el-form-item label="政治面貌" prop="politics">
                <el-input v-model="form.politics"></el-input>
            </el-form-item>
            <!-- 是否服兵役militaryService -->
            <el-form-item label="是否服兵役" prop="militaryService">

                <el-radio-group v-model="form.militaryService">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                </el-radio-group>
            </el-form-item>
            <!-- insurance，，，保险情况 -->
            <el-form-item label="保险情况" prop="insurance">
                <el-select v-model="form.insurance" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <!-- domicile，，户籍地 -->
            <el-form-item label="户籍" prop="domicile">
                <el-input v-model="form.domicile"></el-input>
            </el-form-item>
            <!-- address驻地 -->
            <el-form-item label="居住地" prop="address">
                <el-input v-model="form.address"></el-input>
            </el-form-item>
            <!-- qq，qq -->
            <el-form-item label="qq" prop="qq">
                <el-input v-model="form.qq"></el-input>
            </el-form-item>
            <!-- physicalFitnessLevel，身体素质 -->
            <el-form-item label="身体素质" prop="physicalFitnessLevel">
                <el-input v-model="form.physicalFitnessLevel"></el-input>
            </el-form-item>
            <!-- 其他特长   otherSpecialty -->
            <el-form-item label="其他特长" prop="otherSpecialty">
                <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.otherSpecialty">
                </el-input>
            </el-form-item>
            <!-- emergencyContactNameFirst 1紧急联系人名字 -->
            <el-form-item label="紧急联系人名字1" prop="emergencyContactNameFirst">
                <el-input v-model="form.emergencyContactNameFirst"></el-input>
            </el-form-item>
            <!--1紧急联系人电话 emergencyContactPhoneFirst  -->
            <el-form-item label="紧急联系人电话1" prop="emergencyContactPhoneFirst">
                <el-input v-model="form.emergencyContactPhoneFirst"></el-input>
            </el-form-item>
            <!-- emergencyContactRelationFirst   1紧急联系人关系-->
            <el-form-item label="紧急联系人关系1" prop="emergencyContactRelationFirst">
                <el-input v-model="form.emergencyContactRelationFirst"></el-input>
            </el-form-item>


            <!-- emergencyContactNameSecond 2紧急联系人名字 -->
            <el-form-item label="紧急联系人名字2" prop="emergencyContactNameSecond">
                <el-input v-model="form.emergencyContactNameSecond"></el-input>
            </el-form-item>
            <!--2紧急联系人电话 emergencyContactPhoneSecond  -->
            <el-form-item label="紧急联系人电话2" prop="emergencyContactPhoneSecond">
                <el-input v-model="form.emergencyContactPhoneSecond"></el-input>
            </el-form-item>
            <!-- emergencyContactRelationSecond   2紧急联系人关系-->
            <el-form-item label="紧急联系人关系2" prop="emergencyContactRelationSecond">
                <el-input v-model="form.emergencyContactRelationSecond"></el-input>
            </el-form-item>





            <el-form-item label="无犯罪记录证明" prop="noCrimeRecord">
                <el-upload class="avatar-uploader" :auto-upload='false' :show-file-list="false"
                    :before-upload="beforeAvatarUpload"  :on-change="(file) => handleCoverChange(file, 'noCrimeRecord')" action="">
                    <img v-if="form.noCrimeRecord" :src="form.noCrimeRecord" class="avatar" name="img">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

            <!-- 正式队员考试    preparationTransferRegular -->
            <el-form-item label="正式队员考核" prop="preparationTransferRegular">
                <el-upload class="avatar-uploader" :auto-upload='false' :show-file-list="false"
                    :before-upload="beforeAvatarUpload" :on-change="(file) => handleCoverChange(file, 'preparationTransferRegular')" action="">
                    <img v-if="form.preparationTransferRegular" :src="form.preparationTransferRegular" class="avatar" name="img">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

            <!-- 救援技能1   rescueSkillNameFirst -->
            <el-form-item label="救援技能1" prop="rescueSkillNameFirst">
                <el-input v-model="form.rescueSkillNameFirst"></el-input>
            </el-form-item>


            <!-- 救援证明1   rescueSkillImgFirst-->
            <el-form-item label="救援证明1" prop="rescueSkillImgFirst">
                <el-upload class="avatar-uploader" :auto-upload='false' :show-file-list="false"
                    :before-upload="beforeAvatarUpload":on-change="(file) => handleCoverChange(file, 'rescueSkillImgFirst')" action="">
                    <img v-if="form.rescueSkillImgFirst" :src="form.rescueSkillImgFirst" class="avatar" name="img">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

            <!-- 救援技能2   rescueSkillNameSecond -->
            <el-form-item label="救援技能2" prop="rescueSkillNameSecond">
                <el-input v-model="form.rescueSkillNameSecond"></el-input>
            </el-form-item>


            <!-- 救援证明2   rescueSkillImgSecond-->
            <el-form-item label="救援证明2" prop="rescueSkillImgSecond">
                <el-upload class="avatar-uploader" :auto-upload='false' :show-file-list="false"
                    :before-upload="beforeAvatarUpload" :on-change="(file) => handleCoverChange(file, 'rescueSkillImgSecond')" action="">
                    <img v-if="form.rescueSkillImgSecond" :src="form.rescueSkillImgSecond" class="avatar" name="img">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>


            <!-- 救援技能3   rescueSkillNameThird -->
            <el-form-item label="救援技能3" prop="rescueSkillNameThird">
                <el-input v-model="form.rescueSkillNameThird"></el-input>
            </el-form-item>


            <!-- 救援证明3   rescueSkillNameThird-->
            <el-form-item label="救援证明3" prop="rescueSkillNameThird">
                <el-upload class="avatar-uploader" :auto-upload='false' :show-file-list="false"
                    :before-upload="beforeAvatarUpload" :on-change="(file) => handleCoverChange(file, 'rescueSkillNameThird')" action="">
                    <img v-if="form.rescueSkillNameThird" :src="form.rescueSkillNameThird" class="avatar" name="img">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <!-- 交通工具   vehicle -->
            <el-form-item label="交通工具" prop="vehicle">
                <el-select v-model="form.vehicle" placeholder="请选择">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <!-- 急救水平   emergencyMedicalLevel -->
            <el-form-item label="急救水平" prop="emergencyMedicalLevel">
                <el-select v-model="form.emergencyMedicalLevel" placeholder="请选择">
                    <el-option v-for="item in options2" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <!-- gps水平  gpsLevel -->
            <el-form-item label="gps水平" prop="gpsLevel">
                <el-input v-model="form.gpsLevel"></el-input>
            </el-form-item>
            <!-- 驾驶证车型  permittedVehicleType -->
            <el-form-item label="驾驶证车型" prop="permittedVehicleType">
                <el-input v-model="form.permittedVehicleType"></el-input>
            </el-form-item>

            <!-- 无线电操作资格  radioOperationQualification -->
            <el-form-item label="无线电操作资格" prop="radioOperationQualification">
                <el-input v-model="form.radioOperationQualification"></el-input>
            </el-form-item>

            <!-- 无人驾驶航空型号  uavType -->
            <el-form-item label="无人驾驶航空型号" prop="uavType">
                <el-input v-model="form.uavType"></el-input>
            </el-form-item>

            <!-- 无人驾驶航空级别  uavLicenseLevel -->
            <el-form-item label="无人驾驶航空级别" prop="uavLicenseLevel">
                <el-input v-model="form.uavLicenseLevel"></el-input>
            </el-form-item>
            <!-- wildernessSurvivalAbility   野外生存能力 -->
            <el-form-item label="野外生存能力" prop="wildernessSurvivalAbility">
                <el-select v-model="form.wildernessSurvivalAbility" placeholder="请选择">
                    <el-option v-for="item in options3" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="getbianjidui">确定</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { bianjidui, tupushang } from '@/api';
export default {
    props: ['azhe'],
    data() {
        return {
            form: {
                id: '',
                militaryService: 0,
                noCrimeRecord: '',
                preparationTransferRegular:'',
                rescueSkillNameThird:'',
                rescueSkillImgSecond:'',
                rescueSkillImgFirst:'',
            },
            options: [{
                value: '选项1',
                label: '有'
            }, {
                value: '选项2',
                label: '无'
            }
            ],
            options1: [{
                value: '选项1',
                label: '有'
            }, {
                value: '选项2',
                label: '无'
            }
            ],
            options2: [{
                value: '选项1',
                label: '有'
            }, {
                value: '选项2',
                label: '无'
            }
            ],
            options3: [{
                value: '选项1',
                label: '无'
            },
            {
                value: '选项2',
                label: '弱'
            }, {
                value: '选项3',
                label: '一般'
            }
            ]

        }
    },
    methods: {
        handleCoverChange(file,fieldName) {
            console.log(111);
            console.log(file, 3333);
            // console.log(fileList.length,999111);

            // if (file.raw) {
            //     console.log(2222);

            // const file = fileList[0];
            if (this.beforeAvatarUpload(file)) {
                const formData = new FormData();
                formData.append("img", file.raw); // 确保 file.raw 是有效的 Blob 对象
                tupushang(formData).then(res => {
                    console.log(res, "上传成功");
                    this.form[fieldName] = res.data.img; // 假设服务器返回的是图片的URL
                }).catch(error => { 
                    console.error("上传失败", error);
                });
                // }
                // 创建本地预览URL
                // this.createLocalPreviewURL(file);
            }
        },
        beforeAvatarUpload(file) {
            console.log(file,'123');
            
            const isJPG = file.raw.type === 'image/jpeg';
            const isLt2M = file.raw.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },



        createLocalPreviewURL(file) {

            let fileToCreateUrl;

            if (file.raw && file.raw instanceof Blob) {

                fileToCreateUrl = file.raw;

            } else if (file instanceof Blob || file instanceof File) {

                fileToCreateUrl = file;

            } else {

                console.error('无法识别的文件对象:', file);

                return;

            }



            const fileUrl = URL.createObjectURL(fileToCreateUrl);

            this.form.noCrimeRecordPreview = fileUrl; // 使用一个新的属性来存储预览URL

        },
        geita() {
            this.form = JSON.parse(JSON.stringify(this.azhe))
            console.log(this.form, 999);

        },
        getbianjidui() {
            bianjidui(this.form).then(res => {
                console.log(res, 888);

            })
            this.$emit("done")
        }
    },
    mounted() {
        console.log(this.azhe, 333);
        this.geita()
    }
}

</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>